<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>html5双十二手机抽奖代码 - 站长素材</title>

<link rel="stylesheet" type="text/css" href="css/styleCJ.css"/>

</head>
<body>

<div id="title">
	<img src="img/title.png">
</div>

<div class="shanDeng" id="deng">
	<div id="luck"><!-- luck -->
		<table>
			<tr>
				<td class="luck-unit luck-unit-0"><img src="img/1.png"></td>
				<td class="luck-unit luck-unit-1"><img src="img/2.png"></td>
				<td class="luck-unit luck-unit-2"><img src="img/4.png"></td>
				<td class="luck-unit luck-unit-3"><img src="img/3.png"></td>
			</tr>
			<tr>
				<td class="luck-unit luck-unit-11"><img src="img/6.png"></td>
				<td rowspan="2" colspan="2" class="cjBtn" id="btn"></td>
				<td class="luck-unit luck-unit-4"><img src="img/5.png"></td>
			</tr>
			<tr>
				<td class="luck-unit luck-unit-10"><img src="img/1.png"></td>
				<td class="luck-unit luck-unit-5"><img src="img/6.png"></td>
			</tr>
			<tr>
				<td class="luck-unit luck-unit-9"><img src="img/3.png"></td>
				<td class="luck-unit luck-unit-8"><img src="img/4.png"></td>
				<td class="luck-unit luck-unit-7"><img src="img/8.png"></td>
				<td class="luck-unit luck-unit-6"><img src="img/7.png"></td>
			</tr>
		</table>
	</div><!-- luckEnd -->
</div>

<script src="js/jquery-1.8.3.min.js"></script>
<script>
	var luck={
		index:-1,	//当前转动到哪个位置，起点位置
		count:0,	//总共有多少个位置
		timer:0,	//setTimeout的ID，用clearTimeout清除
		speed:20,	//初始转动速度
		times:0,	//转动次数
		cycle:50,	//转动基本次数：即至少需要转动多少次再进入抽奖环节
		prize:-1,	//中奖位置
		init:function(id){
			if ($("#"+id).find(".luck-unit").length>0) {
				$luck = $("#"+id);
				$units = $luck.find(".luck-unit");
				this.obj = $luck;
				this.count = $units.length;
				$luck.find(".luck-unit-"+this.index).addClass("active");
			};
		},

		
		roll:function(){
			var index = this.index;
			var count = this.count;
			var luck = this.obj;
			$(luck).find(".luck-unit-"+index).removeClass("active");
			index += 1;
			if (index>count-1) {
				index = 0;
			};
			$(luck).find(".luck-unit-"+index).addClass("active");
			this.index=index;
			return false;
		},
		stop:function(index){
			this.prize=index;
			return false;
		}
	};


	function roll(){
		luck.times += 1;
		luck.roll();
		if (luck.times > luck.cycle+10 && luck.prize==luck.index) {
			clearTimeout(luck.timer);
			luck.prize=-1;
			luck.times=0;
			click=false;
		}else{
			if (luck.times<luck.cycle) {
				luck.speed -= 10;
			}else if(luck.times==luck.cycle) {
				var index = Math.random()*(luck.count)|0;
				luck.prize = index;		
			}else{
				if (luck.times > luck.cycle+10 && ((luck.prize==0 && luck.index==7) || luck.prize==luck.index+1)) {
					luck.speed += 110;
				}else{
					luck.speed += 20;
				}
			}
			if (luck.speed<40) {
				luck.speed=40;
			};

			luck.timer = setTimeout(roll,luck.speed);
		}
		return false;
	}


//闪灯效果
	var num = 0;
	$(".shanDeng").attr("class",function(){
		setInterval(function(){ 
			num++;
			if(num%2==0){
				$('#deng').addClass("shanDeng2");
			}else{
				$('#deng').addClass("shanDeng");
				$('#deng').removeClass('shanDeng2');
			}
		},500)
	})


	var click=false;
	window.onload=function(){
		luck.init('luck');
		$("#btn").click(function(){
			//按下弹起效果
			$("#btn").addClass("cjBtnDom");
			setTimeout(function(){	
				$("#btn").removeClass("cjBtnDom");
			},200);

			
			if(click) {
				return false;
			}
			else{
				luck.speed=100;
				roll();
				click=true;
				return false;
			}
		
		});
	};
</script>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
<p>来源：<a href="http://sc.chinaz.com/" target="_blank">站长素材</a></p>
</div>
</body>
</html>